<template>
  <view class="normal-login-container background-image">
    <view class="logo-content align-center justify-center flex">
    </view>
    <view class="login-form-content">
      <view class="input-item flex align-center">
        <view class="iconfont icon-user icon"></view>
        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30"/>
      </view>
      <view class="input-item flex align-center">
        <view class="iconfont icon-password icon"></view>
        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20"/>
      </view>
      <view class="action-btn">
        <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
      </view>
    </view>
  </view>
</template>

<script>


import {getUpdateInfo, setToken} from "../utils/auth";
import {postAction} from "../utils/action";
import {clearFileContent, readFile, saveFile} from "../utils/storageFile";
import Upgrade from "../components/upgrade.vue";

export default {
  components: {Upgrade},
  data() {
    return {
      codeUrl: "",
      captchaEnabled: false,
      // 用户注册开关
      register: false,
      loginForm: {
        username: "",
        password: "",
        code: "",
        uuid: '',
        type: "boos"
      }
    }
  },
  async mounted() {
      await this.autoLogin()
  },
  methods: {
    async autoLogin() {
      const tokenData = await readFile();
      if (tokenData.data) {
        this.loginSuccess(tokenData.data)
      }
    },
    // 登录方法
    handleLogin() {
      if (this.loginForm.username === "") {
        this.$modal.msgError("请输入您的账号")
      } else if (this.loginForm.password === "") {
        this.$modal.msgError("请输入您的密码")
      } else {
        this.$modal.loading("登录中，请稍候...")
        this.pwdLogin()
      }
    },
    // 密码登录
    pwdLogin() {
      postAction("sys/mLogin", this.loginForm).then(rel => {
        if (rel.success) {
          saveFile(rel)
          this.loginSuccess(rel)
        } else {
          this.$modal.msgError(rel.message)
        }
      }).finally(() => {
        this.$modal.closeLoading()
      })
    },
    // 登录成功后，处理函数
    loginSuccess(res) {
      setToken(res.result.token)
      this.$store.state.user.token = res.result.token
      this.$store.state.user.avatar = (res.result.userInfo == null || res.result.userInfo.avatar == "" || res.result.userInfo.avatar == null) ? require("@/static/img/other/upload.png") : res.result.userInfo.avatar
      this.$store.state.user.roles = res.result.userInfo.staffType
      // this.$store.state.user.permissions = res.result.userInfo.name
      this.$store.state.user.name = res.result.userInfo.realname
      this.$store.state.user.info = res.result.userInfo
      postAction("sys/checkLogin").then(res => {
        if(res.success){
          // 设置用户信息
          uni.reLaunch({
            url: '/pages/index'
          })
        }else{
          clearFileContent() //清空
        }
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.normal-login-container {
  width: 100%;

  .logo-content {
    width: 100%;
    font-size: 21px;
    text-align: center;
    padding-top: 15%;

    image {
      border-radius: 4px;
    }

    .title {
      margin-left: 10px;
    }
  }

  .login-form-content {
    text-align: center;
    margin: 20px auto;
    margin-top: 90%;
    width: 80%;

    .input-item {
      margin: 20px auto;
      background-color: #f5f6f7;
      height: 45px;
      border-radius: 20px;

      .icon {
        font-size: 38rpx;
        margin-left: 10px;
        color: red;
      }

      .input {
        width: 100%;
        font-size: 14px;
        line-height: 20px;
        text-align: left;
        padding-left: 15px;
      }

    }

    .login-btn {
      margin-top: 40px;
      height: 45px;
      background-color: red;
    }

    .reg {
      margin-top: 15px;
    }

    .xieyi {
      color: #333;
      margin-top: 20px;
    }

    .login-code {
      height: 38px;
      float: right;

      .login-code-img {
        height: 38px;
        position: absolute;
        margin-left: 10px;
        width: 200rpx;
      }
    }
  }
}

</style>

<style scoped>
.background-image {
  background-image: url('../static/img/login/thumb.png'); /* 确保路径正确 */
  background-repeat: repeat-x;
  background-position: left top;
  background-size: contain;
}
</style>